<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-06 09:41:43
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <script
      src="./common/js/jquery-1.7.2.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <title>新建合同</title>
  </head>

  <body>
    <div class="addPerson_dialog" id="addPerson_dialog">
      <!-- <div class="selectPersonGroup">
      <label>
        <input type="radio" name="personGroup" id="">全部人员
      </label>
      <label>
        <input type="radio" name="personGroup" id="">部分人员
      </label>
    </div> -->
      <div class="allTree">
        <div class="itemTree leftTree">
          <div class="treeSearch">
            <div class="select-group" style="width: 60%">
              <div class="options">
                <input placeholder="选择组织" style="width: 100%" />
                <ul>
                  <div id="addressType" class="tree"></div>
                </ul>
              </div>
            </div>
            <div class="input-group">
              <input style="width: 80%" placeholder="输入关键字" />
              <label> <img src="./common/img/ghcj2/sosou.png" /> </label>
            </div>
          </div>
          <div class="itemTree_content">
            <!-- <div id="leftTreeContent" class="tree"></div> -->
            <ul>
              <li v-for="(item,index) in leftList">
                <span>{{item.name}}</span>
                <span>{{item.sector}}</span>
                <span>{{item.job}}</span>
                <span @click="add(index)">＋</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="itemTree rightTree">
          <div class="rightTreeAction">
            <div>已选择：{{rightList.length}}个部门</div>
            <button @click="allDel" class="button_error_text">全部清空</button>
          </div>
          <div class="itemTree_content">
            <ul>
              <li v-for="(item,index) in rightList">
                <span>{{item.name}}</span>
                <span>{{item.sector}}</span>
                <span>{{item.job}}</span>
                <span @click="del(index)">×</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import Tree from "./common/js/tree.js";
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          leftList: [
            {
              name: "张三",
              sector: "部门",
              job: "职位",
            },
            {
              name: "张三",
              sector: "部门",
              job: "职位",
            },
            {
              name: "张三",
              sector: "部门",
              job: "职位",
            },
          ],
          rightList: [
            {
              name: "张三",
              sector: "部门",
              job: "职位",
            },
          ],
        };
      },
      methods: {
        allDel() {
          this.rightList.forEach((item) => {
            this.leftList.push(item);
          });
          this.rightList = [];
        },
        add(index) {
          this.rightList.push(this.leftList[index]);
          this.leftList.splice(index, 1);
        },
        del(index) {
          this.leftList.push(this.rightList[index]);
          this.rightList.splice(index, 1);
        },
      },
    }).mount("#addPerson_dialog");
    let leftTree = new Tree({
      el: "#addressType",
      isCheckBox: false,
      checkedIds: ["2"],
      click: (e) => {
        console.log(e);
      },
      data: [
        {
          id: "1",
          name: "产品部",
          level: 1,
          child: [
            {
              id: "2",
              name: "设计部",
              level: 2,
            },
            {
              id: "3",
              name: "技术部",
              level: 2,
              child: [
                {
                  level: 3,
                  id: "4",
                  name: "设计1部",
                  child: [
                    {
                      level: 4,
                      id: "4",
                      name: "设计1部",
                      child: [
                        {
                          level: 5,
                          id: "4",
                          name: "设计1部",
                          child: [
                            {
                              level: 6,
                              id: "4",
                              name: "设计1部",
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
                {
                  level: 3,
                  id: "5",
                  name: "设计2部",
                },
                {
                  level: 3,
                  id: "6",
                  name: "设计3部",
                },
              ],
            },
          ],
        },
      ],
    });
  </script>
</html>
